<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Home</title>
        <link href="css/Style.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <h:form>
            <div id="contenner">
                <div id="sidebar">
                    <p:dock position="top">
                        <p:menuitem value="Audi" icon="/logo/Logo-Audi.jpg" url="#"/>
                        <p:menuitem value="BMW" icon="/logo/Logo-BMW.jpg" url="#"/>
                        <p:menuitem value="Honda" icon="/logo/Logo-Honda.jpg" url="#"/>
                        <p:menuitem value="Lesux" icon="/logo/Logo_Lesux.jpg" url="#"/>
                    </p:dock>

                    <p:dock>
                        <p:menuitem value="Audi" icon="/logo/Logo-Audi.jpg" url="#"/>
                        <p:menuitem value="BMW" icon="/logo/Logo-BMW.jpg" url="#"/>
                        <p:menuitem value="Honda" icon="/logo/Logo-Honda.jpg" url="#"/>
                        <p:menuitem value="Lesux" icon="/logo/Logo_Lesux.jpg" url="#"/>
                    </p:dock>
                </div>
                <div id="content">
                    <div id="search" align="right">
                        <h:panelGrid columns="3">
                            <h:inputText id="keyword" value="#{carBean.valueSearch}"  label="Keyword" style="height: 37px;width: 200px"/>
                            <p:watermark for="keyword" value="Search with a keyword"/>
                            <p:commandButton action="#{carBean.searchCar}" value="Search" ajax="false"/>
                        </h:panelGrid>
                    </div>
                    <p:dataGrid var="car" value="#{carBean.listvehicle}" columns="2" rows="4" paginator="true" paginatorTemplate="
                                {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                rowsPerPageTemplate="6,8,10,12" >
                        <p:column>
                            <p:panel header="#{car.vehilceName}" style="text-align:cente ; width: 295px">

                                <h:panelGrid columns="1" style="width: 150px; height: 100px">
                                    <h:commandLink action="#{carBean.showDetailVehicle(car)}">
                                        <p:graphicImage value="/ImgCar/#{car.image}" style="width: 255px; height: 150px" />
                                    </h:commandLink>
                                    <h:outputText value="Price : #{car.price} USD"/>
                                </h:panelGrid>
                            </p:panel>
                        </p:column>
                    </p:dataGrid>          "
                </div>
            </div>
            <!-- <h:dataTable value="{carBean.listvehicle}" var="car">
                 <h:column>
                     <f:facet name="header">
                         <h:outputText value="Vehicle Name"/>
                     </f:facet>
                     <h:outputText value="{car.vehilceName}"/>
                 </h:column>
             </h:dataTable>
            -->
        </h:form>
    </h:body>
</html>


